Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Month Pickers Read Only
We can make a month picker read-only with the readonly prop:
<template>
<v-row justify="center">
<v-date-picker v-model="date" type="month" readonly></v-date-picker>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
date: new Date().toISOString().substr(0, 7),
}),
};
</script>
Month Pickers Current Month Indicator
The current month indicator can be changed with the show-current prop:
<template>
<v-row justify="center">
<v-date-picker v-model="date" type="month" :show-current="false"></v-date-picker>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
date: new Date().toISOString().substr(0, 7),
}),
};
</script>
The show-current prop set to false makes the selected month lighter.
We can also set it to a month string:
<template>
<v-row justify="center">
<v-date-picker v-model="date" type="month" show-current="2020-08"></v-date-picker>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
date: new Date().toISOString().substr(0, 7),
}),
};
</script>
and the selected month will have a border around it.
Date Pickers in Dialog and Menu
We can put a date picker in a dialog box.
For example, we can write:
<template>
<v-row justify="center">
<v-col cols="12" sm="6" md="4">
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
:return-value.sync="date"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="date"
label="Picker in menu"
prepend-icon="event"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="date" no-title scrollable>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="menu = false">Cancel</v-btn>
<v-btn text color="primary" @click="$refs.menu.save(date)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-col>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
date: new Date().toISOString().substr(0, 10),
menu: false,
}),
};
</script>
We put our v-date-picker in a v-menu so that we can show the date picker when we click on the menu icon.
We put the v-text-field in the activator slot so that we can use the on object to listen to date picker events.
And we use the attrs object to set the props for the v-text-field .
This way, when we pick a date from the date picker, its value will be shown in the text field.
prepend-icon shows the icon.
Date Pickers — Formatting Date
We can format dates from the date picker.
For example, we can write:
<template>
<v-row justify="center">
<v-col cols="12" sm="6" md="4">
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
:return-value.sync="date"
transition="scale-transition"
offset-y
min-width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="computedDateFormatted"
label="Picker in menu"
prepend-icon="event"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="date" no-title scrollable>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="menu = false">Cancel</v-btn>
<v-btn text color="primary" @click="$refs.menu.save(date)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-col>
</v-row>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
date: new Date().toISOString().substr(0, 10),
menu: false,
}),
computed: {
computedDateFormatted() {
return this.formatDate(this.date);
},
},
methods: {
formatDate(date) {
if (!date) return null;
const [year, month, day] = date.split("-");
return `${month}/${day}/${year}`;
},
},
};
</script>
We set the v-model of the v-text-field to the computedDateFormatted computed property.
It formats the date string with the formatDate method, which splits the original date string, and combines the parts with slashes.
Then we should see the formatted date with the text field.
Conclusion
We can set the month picker to be read-only and format the date to what we want.
